<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Snake Score</title>
    <style>
        body {
            background: black;
            margin: 0;
        }

        h1 {
            color: #444;
            margin: 0 0 10px;
        }

        #scoreWrap {
            margin-top: 40px;
            margin-left:auto;
            margin-right:auto;
            background-color: #111;
            border: 10px dashed #333;
            padding: 20px 20px 25px;
            width: 400px;
            text-align: center;
        }

        #scoreTable {
            margin-left:auto;
            margin-right:auto;
            margin-bottom: 10px;
            border-collapse: collapse;
            color: #ffff00;
            background-color: #333;
        }

        #scoreTable th, #scoreTable td {
            border: 5px solid #999;
            padding: 5px 15px;         
        }

        #scoreTable th {
            color: #ffac00;        
        }
    </style>
</head>

<body>    
    <div id="scoreWrap" ng-app="scoreBoard">
        <h1>Snake Top Score</h1>

        <table id="scoreTable" ng-controller="ListCtrl">
            <tr>
                <th>rank</th>
                <th>nickname</th>
                <th>score</th>
            </tr>

            <tr ng-repeat="entry in entries">
                <td>{{ $index + 1 }}</td>
                <td>{{ entry.name }}</td>
                <td>{{ entry.score }}</td>
            </tr>
        </table>
        <a id="tweetBtnId" href="https://twitter.com/share" class="twitter-share-button" 
         data-text=""
         data-url="http://localhost" data-size="large" data-count="none">Tweet</a>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.min.js"></script>

    <script>
        angular.module('scoreBoard', ['mongolab']);

        angular.module('mongolab', ['ngResource']).
            factory('scoreBoard', function($resource) {
                var scoreBoard = $resource('https://api.mongolab.com/api/1/databases' +
                    '/nectarine-snake/collections/scores/:id',
                    { apiKey: 'SMc-LQqBYw3u5ZSYeB5h5YPjhs1sNbny' } 
                );

                return scoreBoard;
            });

        function ListCtrl($scope, scoreBoard) {
            $scope.entries = scoreBoard.query({l: '5', s: '{score:-1}'});
        }
    </script>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

    <script data-main="scripts/score-main" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.5/require.min.js"></script>
</body>
</html>
